<template>
  <div class="user-agreement">
    <div class="agreement-header">
      <h1>LetHear用户服务协议</h1>
      <p class="update-time">最后更新时间：{{ new Date().toLocaleDateString() }}</p>
    </div>

    <div class="agreement-content">
      <section class="agreement-section">
        <h2>第一条 总则</h2>
        <div class="section-content">
          <p>1.1 本协议是您（用户）与LetHear平台之间关于使用LetHear服务所订立的协议。</p>
          <p>
            1.2
            LetHear平台是指由我们提供的在线内容分享与交流平台，包括但不限于网站、移动应用程序等。
          </p>
          <p>
            1.3
            本协议适用于用户使用LetHear平台提供的所有服务，包括但不限于用户注册、内容发布、私信功能、悄悄话功能等。
          </p>
          <p>
            1.4
            用户通过注册账号、登录使用或以其他方式使用LetHear服务，即表示同意并接受本协议的全部条款。
          </p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第二条 账户注册与管理</h2>
        <div class="section-content">
          <p>
            2.1
            <strong>注册资格</strong
            >：用户应具备完全民事行为能力。未满18周岁的用户应在监护人同意下使用本服务。
          </p>
          <p>
            2.2
            <strong>注册信息</strong
            >：用户应提供真实、准确、完整的注册信息，包括但不限于用户名、邮箱地址等。
          </p>
          <p>
            2.3
            <strong>账户安全</strong
            >：用户有义务妥善保管账户密码，对账户下的所有活动承担责任。如发现账户被盗用，应立即通知我们。
          </p>
          <p>2.4 <strong>账户唯一性</strong>：每个用户只能注册一个账户，禁止恶意注册多个账户。</p>
          <p>2.5 <strong>账户转让</strong>：用户账户不得转让、出售或以其他方式提供给第三方使用。</p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第三条 服务内容与使用规范</h2>
        <div class="section-content">
          <p>
            3.1
            <strong>服务内容</strong>：LetHear为用户提供内容发布、浏览、交流、私信、悄悄话等服务。
          </p>
          <p>3.2 <strong>使用规范</strong>：用户在使用服务时应遵守以下规定：</p>
          <ul>
            <li>不得发布违反国家法律法规的内容</li>
            <li>不得发布涉及暴力、色情、赌博、毒品等有害信息</li>
            <li>不得发布侵犯他人合法权益的内容</li>
            <li>不得恶意骚扰、诽谤、威胁其他用户</li>
            <li>不得传播虚假信息、谣言或误导性内容</li>
            <li>不得进行商业广告、垃圾信息发布</li>
            <li>不得利用技术手段干扰平台正常运行</li>
          </ul>
          <p>
            3.3
            <strong>内容版权</strong
            >：用户发布的原创内容版权归用户所有，但用户授权LetHear在平台范围内使用、展示该内容。
          </p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第四条 隐私保护</h2>
        <div class="section-content">
          <p>4.1 <strong>个人信息保护</strong>：我们承诺按照相关法律法规保护用户的个人信息安全。</p>
          <p>4.2 <strong>信息收集</strong>：我们仅收集提供服务所必需的用户信息，包括：</p>
          <ul>
            <li>注册时提供的基本信息（用户名、邮箱等）</li>
            <li>使用服务过程中产生的行为数据</li>
            <li>设备信息和日志信息</li>
          </ul>
          <p>4.3 <strong>信息使用</strong>：收集的信息仅用于：</p>
          <ul>
            <li>提供和改善服务质量</li>
            <li>保障平台安全</li>
            <li>遵守法律法规要求</li>
          </ul>
          <p>4.4 <strong>信息共享</strong>：除法律法规要求外，我们不会向第三方提供用户个人信息。</p>
          <p>
            4.5
            <strong>悄悄话隐私</strong
            >：悄悄话功能提供匿名交流服务，我们承诺保护用户在该功能中的隐私。
          </p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第五条 知识产权</h2>
        <div class="section-content">
          <p>
            5.1 <strong>平台知识产权</strong>：LetHear平台的软件、技术、设计等知识产权归我们所有。
          </p>
          <p>
            5.2
            <strong>用户内容权利</strong
            >：用户对其发布的原创内容享有著作权，但不得侵犯他人知识产权。
          </p>
          <p>
            5.3
            <strong>授权许可</strong>：用户发布内容即授权LetHear在平台范围内使用、展示、传播该内容。
          </p>
          <p>
            5.4
            <strong>侵权处理</strong>：如发现侵权内容，权利人可通过官方渠道举报，我们将依法处理。
          </p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第六条 免责声明</h2>
        <div class="section-content">
          <p>
            6.1
            <strong>服务中断</strong>：因系统维护、网络故障等原因导致的服务中断，我们不承担责任。
          </p>
          <p>6.2 <strong>用户行为</strong>：用户的违法违规行为造成的后果由用户自行承担。</p>
          <p>
            6.3
            <strong>第三方链接</strong
            >：平台可能包含第三方网站链接，我们对第三方网站内容不承担责任。
          </p>
          <p>6.4 <strong>数据丢失</strong>：建议用户备份重要数据，我们对数据丢失不承担责任。</p>
          <p>
            6.5
            <strong>不可抗力</strong
            >：因自然灾害、政府行为等不可抗力因素导致的损失，我们不承担责任。
          </p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第七条 违约处理</h2>
        <div class="section-content">
          <p>7.1 <strong>违约认定</strong>：用户违反本协议任何条款即构成违约。</p>
          <p>7.2 <strong>处理措施</strong>：对违约用户，我们有权采取以下措施：</p>
          <ul>
            <li>删除违规内容</li>
            <li>限制账户功能</li>
            <li>暂停或终止服务</li>
            <li>追究法律责任</li>
          </ul>
          <p>7.3 <strong>申诉机制</strong>：用户对处理结果有异议的，可通过官方渠道申诉。</p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第八条 协议变更与终止</h2>
        <div class="section-content">
          <p>
            8.1
            <strong>协议修改</strong
            >：我们有权根据业务发展需要修改本协议，修改后的协议将在平台公布。
          </p>
          <p>
            8.2
            <strong>协议生效</strong
            >：修改后的协议自公布之日起生效，用户继续使用服务即视为同意修改后的协议。
          </p>
          <p>8.3 <strong>服务终止</strong>：在以下情况下，我们有权终止服务：</p>
          <ul>
            <li>用户严重违反本协议</li>
            <li>用户长期未使用账户</li>
            <li>因业务调整需要</li>
            <li>法律法规要求</li>
          </ul>
          <p>8.4 <strong>数据处理</strong>：服务终止后，我们将按照相关法律法规处理用户数据。</p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第九条 争议解决</h2>
        <div class="section-content">
          <p>9.1 <strong>适用法律</strong>：本协议适用中华人民共和国法律法规。</p>
          <p>
            9.2
            <strong>争议解决</strong
            >：因本协议产生的争议，双方应友好协商解决；协商不成的，可向我们所在地人民法院提起诉讼。
          </p>
          <p>9.3 <strong>部分无效</strong>：如本协议部分条款被认定无效，不影响其他条款的效力。</p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第十条 联系方式</h2>
        <div class="section-content">
          <p>10.1 如您对本协议有任何疑问或建议，请通过以下方式联系我们：</p>
          <ul>
            <li>客服邮箱：support@lethear.com</li>
            <li>官方网站：www.lethear.com</li>
            <li>服务时间：工作日 9:00-18:00</li>
          </ul>
          <p>10.2 我们将在合理时间内回复您的咨询。</p>
        </div>
      </section>

      <section class="agreement-section">
        <h2>第十一条 特别提示</h2>
        <div class="section-content">
          <div class="important-notice">
            <p><strong>重要提示：</strong></p>
            <p>1. 请您仔细阅读本协议的全部内容，特别是免责条款和争议解决条款。</p>
            <p>2. 如您是未成年人，请在监护人陪同下阅读本协议。</p>
            <p>3. 您点击"同意"或使用我们的服务，即表示您已充分理解并同意本协议的全部内容。</p>
            <p>4. 本协议自您同意之日起生效，对双方具有法律约束力。</p>
          </div>
        </div>
      </section>
    </div>

    <div class="agreement-footer">
      <p>LetHear团队</p>
      <p>{{ new Date().getFullYear() }}年{{ new Date().getMonth() + 1 }}月</p>
    </div>
  </div>
</template>

<script setup lang="ts">
// 无需额外的逻辑，这是一个纯展示组件
</script>

<style scoped lang="scss">
.user-agreement {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
  color: #333;

  // 当在对话框中使用时的样式
  &.in-dialog {
    max-width: none;
    margin: 0;
    padding: 24px;
    height: auto;
  }

  .agreement-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #409eff;

    h1 {
      font-size: 28px;
      color: #2c3e50;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .update-time {
      color: #666;
      font-size: 14px;
      margin: 0;
    }
  }

  .agreement-content {
    .agreement-section {
      margin-bottom: 35px;

      h2 {
        font-size: 20px;
        color: #2c3e50;
        margin-bottom: 15px;
        padding-left: 15px;
        border-left: 4px solid #409eff;
        font-weight: 600;
      }

      .section-content {
        padding: 0 20px;

        p {
          margin-bottom: 12px;
          text-align: justify;

          strong {
            color: #2c3e50;
            font-weight: 600;
          }
        }

        ul {
          margin: 15px 0;
          padding-left: 25px;

          li {
            margin-bottom: 8px;
            list-style-type: disc;
          }
        }

        .important-notice {
          background: #fff9e6;
          border: 1px solid #ffd666;
          border-radius: 8px;
          padding: 20px;
          margin: 20px 0;

          p {
            margin-bottom: 10px;

            &:first-child {
              font-weight: 600;
              color: #e6a23c;
              margin-bottom: 15px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  .agreement-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #666;

    p {
      margin: 5px 0;
      font-size: 14px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .user-agreement {
    padding: 15px;

    &.in-dialog {
      padding: 16px;
    }

    .agreement-header {
      h1 {
        font-size: 24px;
      }
    }

    .agreement-content {
      .agreement-section {
        h2 {
          font-size: 18px;
        }

        .section-content {
          padding: 0 10px;
        }
      }
    }
  }
}

// 打印样式
@media print {
  .user-agreement {
    padding: 0;
    max-width: none;

    .agreement-header {
      border-bottom: 2px solid #000;
    }

    .agreement-section {
      page-break-inside: avoid;

      h2 {
        border-left: 4px solid #000;
      }
    }
  }
}
</style>
